<template>
  <a-date-picker
    @openChange='openChange'
    @panelChange='panelChange'
    :open='open'
    mode='year'
    syle='width:100%'
    :disabled="disabled || readOnly"
    :placeholder="placeholder"
    :value="momVal"
    format="YYYY"
    :getCalendarContainer="getCalendarContainer"
    v-bind="$attrs"/>
</template>
<script>
  import moment from 'moment'
  import dayjs from 'dayjs'
  export default {
    name: 'JYearDate',
    props: {
      placeholder:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type: String,
        required: false
      },
      readOnly:{
        type: Boolean,
        required: false,
        default: false
      },
      disabled:{
        type: Boolean,
        required: false,
        default: false
      },
      getCalendarContainer: {
        type: Function,
        default: (node) => node.parentNode
      }
    },
    data () {
      let dateStr = this.value;
      return {
        open:false,
        momVal:!dateStr?null:moment(dateStr,'YYYY')
      }
    },
    watch: {
      value (val) {
        if(!val){
          this.momVal = null
        }else{
          this.momVal = moment(val,'YYYY')
        }
      }
    },
    methods: {
      openChange(status){
        if(status){
          this.open = true
        }else{
          this.open = false
        }
      },
      panelChange(val){
        var dayjs = require('dayjs')
        this.$emit('change',dayjs(val).format('YYYY'))
        this.open = false
      },
    },
    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
